<!-- 菜单选择下拉框 -->
<template>
	<a-tree-select class="menu-select-wp"
		dropdownClassName="menu-select-dropdown"
    v-model:value="menuValue"
    :tree-data="_d.treeData"
    :tree-checkable="props.treeCheckable"
    :treeCheckStrictly="treeCheckStrictly"
    treeDefaultExpandAll
    :maxTagCount="props.maxTagCount"
    allow-clear
    placeholder="请选择"
    :fieldNames="{label: 'label', value: 'value', children: 'children'}"
    :listHeight="400"
    @change="handleChange"/>
</template>

<script setup>
	import { reactive, onMounted, computed } from 'vue'
	// import staticMenus from "@/router/menus.js";

	import {menuTree} from "@/api/menu.js";

	const emit = defineEmits(['update:modelValue'])

	const props = defineProps({
		// 值，
		// 单选时为字符串 - 空值: ''
		// 多选时为数组 - 空值: []
		modelValue: {
			type: [String, Array]
		},
		// 是否多选
		treeCheckable: {
			type: Boolean,
			default: false
		},
		// 最多显示多少个 tag
		maxTagCount: {
			type: [String, Number],
			default: 'responsive'
		}
	})

	// 父子节点选中状态是否关联，true关联，false不关联
	const treeCheckStrictly = computed(() => {
		return props.treeCheckable ? true : false;
	})

	const _d = reactive({
		treeData: []
	})

	// 菜单值
	const menuValue = computed({
		get: () => {
			if(!props.treeCheckable) { // 单选
				return props.modelValue || null;

			} else { // 多选
				return getCheckedValue(props.modelValue) || [];
			}
		},
		set: (value) => {
			let res = null;
			if (!props.treeCheckable) { // 单选
				res = value || '';
			} else { // 多选
				res = value.map(item => item.value);
			}
			emit('update:modelValue', res);
		}
	})

	onMounted(() => {
		getData();
	})

	function getData() {
		menuTree().then(res => {
			if(res.code) {
				return;
			}
			_d.treeData = recursion(res);
		})
		// _d.treeData = [
		// 	{label: '首页', value: 'a001'},
		// 	{label: '使用登记', value: 'a002', children: [
		// 		{label: '受理', value: 'a002001'},
		// 		{label: '审核', value: 'a002002'},
		// 		{label: '审批', value: 'a002003'},
		// 	]},
		// 	{label: '变更登记', value: 'a003'},
		// 	{label: '使用变更登记进度', value: 'a004'},
		// ];

		// 递归
		function recursion(list) {
			let arr = [];
			for(let i = 0; i < list.length; i++) {
				let item = list[i];
				let obj = {
					label: item.menu_name,
					value: item.menu_id
				}
				if(item.child) {
					obj.children = recursion(item.child);
				}
				arr.push(obj);
			}
			return arr;
		}
	}

	// 值改变
	function handleChange(value) {
		// console.log(value);
	}

	// 获取选中的值
	// 设置了treeCheckable为true，下拉框的值将变成对象
	function getCheckedValue(arr) {
		let res = [];
		ergodic(_d.treeData);
		return res;

		// 遍历
		function ergodic(list) {
			for (let i = 0; i < list.length; i++) {
				let item = list[i];
				if(arr.indexOf(item.value) != -1) {
					res.push({
						label: item.label,
						value: item.value,
						halfChecked: undefined,
						disabled: undefined
					})
				}
				if(item.children) {
					ergodic(item.children);
				}
			}
		}
	}

	defineExpose({
		reload: getData
	})

</script>

<style lang="less" scoped>
.menu-select-wp {
	min-width: 200px;
	:deep(.ant-select-selection-item-remove) {
		display: flex;
		align-items: center;
	}
	:deep(.ant-select-clear) {
		display: flex;
		align-items: center;
	}
}
</style>
